<template>
	<div class="dibu">
		<div class="dibu_top">
			<div class="dibu_top1">
				<div class="dibu_top1_1">
					<ul>
						<li class="sa">
							<router-link replace to="/index">首页</router-link>
						</li>
						<li class="sa">
							<router-link  to="/home/0">抖音版</router-link>
						</li>
						<li class="sa">
							<router-link  to="/home/1">快手版</router-link>
						</li>
						<li class="sa">
							<router-link  to="/home/2">B站版</router-link>
						</li>
						<li class="sa">
							<router-link  to="/home/3">微博版</router-link>
						</li>
						<li class="sa">
							<router-link replace to="/shujuyanjiu">数据研究</router-link>
						</li>
						<li class="sa">
							<router-link replace to="/lianxiwowen">联系我们</router-link>
						</li>
					</ul>
				</div>
				<div class="dibu_top1_2">
					<div class="dibu_xinxi1">
						<div class="dibu_xinxi1_1">
							<img src="../../../assets/img/foot1.png" />
						</div>
						<div class="dibu_xinxi1_2">
							<span>数据合作</span>
							<span>cooperation@caasdate</span>
						</div>
					</div>
					<div class="dibu_xinxi2">
						<div class="dibu_xinxi1_1">
							<img src="../../../assets/img/foot2.png" />
						</div>
						<div class="dibu_xinxi1_2">
							<span>地址</span>
							<span>北京市朝阳区东亿国际传媒产业园C-15号楼6F</span>
						</div>
					</div>
				</div>
			</div>
			<div class="dibu_top2">
				<div class="erweima1">
					<img src="../../../assets/img/kefu.png" />
					<p>扫码联系客服</p>
				</div>
				<div class="erweima1">
					<img src="../../../assets/img/shishuju.png" />
					<p>扫码查看实时数据</p>
				</div>
			</div>
		</div>
		<div class="dibu_botton">
			@2020 卡思数据（caasdata.com） All rights reserved 京ICP备15010473号-2
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				qufenye:''
			}
		},
		mounted(){
			//循环底部几个导航添加不同时间
			for(var i=0;i<$(".dibu_top1_1 ul li").length;i++){
				$(".dibu_top1_1 ul li").eq(i).css({
					'animation-delay': i*0.2+0.25+'s'
				})
			}
			window.addEventListener("scroll",this.handlescroll)
			
			this.qufenye=this.$route.meta.title;//获取当前页面的页面标题
			
			// console.log($(".dibu").offset().top/1.67,"顶部距离")
		},
		destroyed() {
			window.removeEventListener('scroll',this.handlescroll,false)
		},
		methods:{
			handlescroll(){
				var scrollT=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				// console.log(scrollT);
				
				if(this.qufenye==="深码数据-首页"){
					if(scrollT<$(".dibu").offset().top/1.3){
						$(".dibu .dibu_top1_1 ul li").removeClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").removeClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").removeClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").removeClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").removeClass("animate__animated animate__fadeInLeft")
					}
					if(scrollT>=$(".dibu").offset().top/1.3){
						$(".dibu .dibu_top1_1 ul li").addClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").addClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").addClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").addClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").addClass("animate__animated animate__fadeInLeft")
					}
				}else if(this.qufenye==="深码数据-数据研究"){
					if(scrollT<$(".dibu").offset().top/1.55){
						$(".dibu .dibu_top1_1 ul li").removeClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").removeClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").removeClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").removeClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").removeClass("animate__animated animate__fadeInLeft")
					}
					if(scrollT>=$(".dibu").offset().top/1.55){
						$(".dibu .dibu_top1_1 ul li").addClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").addClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").addClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").addClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").addClass("animate__animated animate__fadeInLeft")
					}
				}else if(this.qufenye==="深码数据-联系我们"){
					if(scrollT<$(".dibu").offset().top/1.67){
						$(".dibu .dibu_top1_1 ul li").removeClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").removeClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").removeClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").removeClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").removeClass("animate__animated animate__fadeInLeft")
					}
					if(scrollT>=$(".dibu").offset().top/1.67){
						$(".dibu .dibu_top1_1 ul li").addClass("animate__animated animate__bounceIn")
						$(".dibu_xinxi1").addClass("animate__animated animate__fadeInUp")
						$(".dibu_xinxi2").addClass("animate__animated animate__fadeInDown")
						$(".erweima1:nth-of-type(1)").addClass("animate__animated animate__fadeInRight")
						$(".erweima1:nth-of-type(2)").addClass("animate__animated animate__fadeInLeft")
					}
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.dibu{
		margin-top:1rem ;
		
		.dibu_top{
			background-color: #001529;
			padding-left: 4.8rem;
			box-sizing: border-box;
			
			.dibu_top1{
				float: left;
				width: 65%;
				
				.dibu_top1_1{
					margin-top:2rem ;
					margin-bottom:1.5rem ;
					ul{
						list-style: none;
						display: flex;
						justify-content: space-between;
						align-content: center;
						
						li{
							float: left;
							cursor: pointer;
							font-size: 0.4rem;
							padding: 1% 1% 1% 1%;
							color: #333;
							a{
								text-decoration: none;
								font-size: 0.4rem;
								color: #fff;
							}
							.router-link-active{
								color: #1890ff;
							}
							a:hover{
								color: #1890ff;
							}
						}
					}
				}
				.dibu_top1_2{
					margin: 2.5rem 0;
					.dibu_xinxi1{
						animation-delay: 0.55s;
						float: left;
						display: flex;
						justify-content: space-between;
						
						.dibu_xinxi1_1{
							img{
								width:1.2rem;
								vertical-align: middle;
								border-radius:50% ;
							}
						}
						.dibu_xinxi1_2{
							margin-left:0.3rem ;
							span{
								display: block;
								color: #fff;
								font-size: 0.4rem;
							}
							span:nth-of-type(2){
								margin-top:0.4rem ;
							}
						}
						
					}
					.dibu_xinxi2{
						animation-delay: 0.55s;
						display: flex;
						justify-content: space-between;
						float: right;
						
						.dibu_xinxi1_1{
							img{
								width:1.2rem;
								vertical-align: middle;
								border-radius:50% ;
							}
						}
						.dibu_xinxi1_2{
							margin-left:0.3rem ;
							span{
								display: block;
								color: #fff;
								font-size: 0.4rem;
							}
							span:nth-of-type(2){
								margin-top:0.4rem ;
							}
						}
					}
				}
				.dibu_top1_2::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			.dibu_top2{
				float: right;
				width: 34%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;
				margin-top:3rem ;
				
				.erweima1{
					animation-delay: 0.55s;
					img{
						width: 2.5rem;
					}
					p{
						color: #fff;
						font-size: 0.3rem;
					}
				}
			}
		}
		.dibu_top::after{
			content: "";
			display: block;
			clear: both;
		}
		.dibu_botton{
			text-align: center;
			padding: 0.6rem 0;
			color: #fff;
			font-size: 0.4rem;
			background-color: #000;
		}
		
	}
</style>
